<template>
  <div id="SearchPosition">
    <el-row class="searchInput">
      <el-col :span="16" :offset="4">
        <el-input placeholder="请输入公司名称" v-model="input" size="large">
          <el-button slot="append" icon="search" @click="getWorkList(1)">搜索</el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="ContentSpan" :offset="ContentOffset">
        <div class="searchList">
          <el-row :gutter="20">
            <el-col :span="22" :offset="1" class="searchList-item">
              <span class="searchTitle">职位名称：</span>
              <span class="span_postionName" @click="dialogVisible = true">{{positionSelectName}}</span>
              <span class="span_postionName" @click="returnSearch()" v-if="shwoDisplay === true"> × </span>
              <el-dialog :visible.sync="dialogVisible" size="small">
                <PositionDialog @positionName="getPostion"></PositionDialog>
              </el-dialog>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-for="(list,index) in selectlistJosn[0].list" :key="index">
            <el-col :span="22" :offset="1" class="searchList-item">
              <span class="searchTitle">{{list.name}}</span>
              <span :id="`${list.id}`">
							<span v-for="(item,index) in list.list" :key="index" :class="item.class"
                    @click="Search(list.label,item.val,list.id)" :id="`${list.id}-${item.val}`">{{item.name}}</span>
						</span>
            </el-col>
          </el-row>
        </div>
        <div class="position-card" v-for="(item,index) in WorkList" :key="index">
          <div class="card-content">
            <div class="content-left">
              <h4 @click="toPositionDetail(item.id)">{{item.job_title}}<span>{{formatterDate(item)}}发布</span></h4>
              <p>
                <span>{{item.salary}}</span>{{forworkExperience(item)}} / {{formatterendEdu(item)}}
              </p>
            </div>
            <div class="content-right">
              <h4>{{item.company_name}}</h4>
              <p>企业服务,数据服务</p>
            </div>
          </div>
          <div class="card-footer">
            <span style="float:left;">{{item.work_space}}</span>
            <div style="width:40%;float:right;">{{item.welfare}}</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="10">
        <div class="page-no-style">
          <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                         :page-size="10"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { formatterTime, changeSalaryStyle } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import Data from '../../assets/file/searchJob.json'
  import PositionDialog from '@/components/company/PositionDialog.vue'

  export default {
    name: 'SearchPosition',
    data () {
      return {
        ContentSpan: 0,
        ContentOffset: 0,
        shwoDisplay: false,
        positionSelectName: '请选择职位',
        selectName: '',
        WorkList: [],
        page_no: 1,
        total: 0,
        page_count: 0,
        Selectlist: {work_years: '', education: '', salary: '', job_title: '', companyName: ''},
        selectlistJosn: [],
        searchjobVal: '0-',
        input: '',
        palceList: [],
        dialogVisible: false,
      }
    },
    created () {
      this.getWorkList(1)
      this.selectlistJosn = Data
      this.ContentSpan = this.$store.state.Resolution
      this.ContentOffset = this.$store.state.ContentOffset
    },
    methods: {
      getPostion (name) {
        this.dialogVisible = false
        this.selectName = name.Thr
        this.positionSelectName = name.One + ' > ' + name.Two + ' > ' + name.Thr
        this.shwoDisplay = true
        this.getWorkList(1)
      },
      toPositionDetail (id) {
        this.$router.push({'path': '/positioninfo/' + id})
      },
      returnSearch () {
        this.shwoDisplay = false
        this.positionSelectName = '请选择职位',
          this.getWorkList(1)
      },
      getWorkList (pageNum) {
        this.Selectlist.companyName = this.input
        let _this = this
        let worklist = new Object()
        worklist.work_years = _this.Selectlist.work_years
        worklist.education = _this.Selectlist.education
        worklist.salary = _this.Selectlist.salary
        if (this.positionSelectName !== '请选择职位') {
          worklist.job_title = this.selectName
        }
        worklist.company_name = _this.Selectlist.companyName
        worklist.page_no = pageNum
        worklist.page_size = 10
        postDataToServer('HM_RESUME_JOBS_LIST', worklist).then(function (data) {
          if (data.status === 0) {
            _this.WorkList = data.data_list
            _this.WorkList.forEach((item) => {
              item = changeSalaryStyle(item)
            })
            _this.total = data.total_results
            _this.page_count = data.total_page
          }
        })
      },
      Search (label, val, id) {
        this.Selectlist[label] = val
        this.getWorkList(1)
        this.searchjobVal = id + '-' + val
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      formatterDate (row, column) {
        return formatterTime('MM月dd日', row.release_date)
      },
      formatterendEdu (row, column) {
        return getStaticMapList('education', row.academic_requirements)
      },
      forworkExperience (row, column) {
        return getStaticMapList('work_experience', row.work_experience)
      }
    },
    watch: {
      //格式变化
      searchjobVal (val, oldVal) {
        let objArr = document.getElementById(val[0]).getElementsByTagName('span')
        for (let i = 0; i < objArr.length; i++) {
          objArr[i].className = 'optionA'
        }
        document.getElementById(val).className = 'optionB'
      },
      //分页
      page_no (val, oldVal) {
        this.getWorkList(val)
      }
    },
    components: {
      PositionDialog
    }
  }
</script>
<style scoped>
  .searchInput {
    background: #EBF0EF;
    padding: 3em;
  }

  /*职位卡片样式*/
  .position-card {
    width: 100%;
    margin-top: 1em;
    border: 1px solid #ccc;
    padding: 10px 0px 0px;
  }

  .card-content {
    height: 90px;
  }

  .content-left {
    width: 40%;
    float: left;
    margin-left: 1em;
  }

  .content-right {
    width: 40%;
    float: right;
  }

  .content-right h4,
  .content-left h4 {
    color: #20A0FF;
    margin: 10px auto;
    cursor: pointer;
  }

  .content-left h4 span {
    font-size: 16px;
    color: #999999;
    margin-left: 1em;
    font-weight: 300;
  }

  .content-right p,
  .content-left p {
    font-size: 16px;
  }

  .content-left p span {
    color: red;
    margin-right: 1em;
  }

  .card-footer {
    height: 2em;
    color: #999999;
    padding: 10px 1em 0px;
    background-color: #FAFAFA;
  }

  .span_postionName {
    color: #1D8CE0;
  }

  .span_postionName:hover {
    color: #ff5e38;
    cursor: pointer;
    text-decoration: underline;
  }
</style>
